<template>
	<view>
		<template v-if="isDataEmpty">
			<view class="search-loading" v-if="status === 'loading'">
				<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" />
			</view>
			<view class="empty" v-else-if="isSearch" :style="{ paddingTop: emptyTop }">
				<uv-empty mode="search"></uv-empty>
			</view>
			<view class="empty" v-else :style="{ paddingTop: emptyTop }">
				<slot name="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="tips">
						列表为空
					</view>
				</slot>
			</view>
		</template>
		<template v-else>
			<slot name="list"></slot>
			<view class="load" v-if="isLoad">
				<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" />
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	defineProps({
		isDataEmpty: {
			type: Boolean,
			default: false
		},
		status: {
			type: String,
			default: ''
		},
		isSearch: {
			type: Boolean,
			default: false
		},
		isLoad: {
			type: Boolean,
			default: true
		},
		noMoreText: {
			type: String,
			default: '我也是有底线的~'
		},
		loadingText: {
			type: String,
			default: '努力加载中'
		},
		loadmoreText: {
			type: String,
			default: '轻轻上拉'
		},
		emptyTop: {
			type: String,
			default: '80rpx'
		},
		color: {
			type: String,
			default: '#606266'
		}
	})
</script>

<style lang="scss" scoped>
	.empty {
		padding-top: 180rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 400rpx;
			height: auto;
		}
	}

	.search-loading {
		display: flex;
		justify-content: center;
		padding-top: 80rpx;
	}

	.tips {
		color: gray;
		font-size: 24rpx;
	}

	.load {
		padding: 30rpx 0;
	}
</style>